<template>
    <el-dialog
            title="分配用户角色"
            :visible.sync="message"
            :show-close="false"
            width="40%">
        <!--        内容-->
        <div>
            <p>姓名：{{user.username}}</p>
            <p>角色：{{user.role_name}}</p>
            <div>
                <span>分配角色</span>
                <el-select v-model="roleId" placeholder="请选择">
                    <el-option
                            v-for="item in rolesList"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </div>
        <!--        对话框底部-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="quit">取 消</el-button>
            <el-button type="primary" @click="addUserRole">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {addUserRole} from "../../../network/users";

    export default {
        name: "AddUserRoleDia",
        props:{
            message:{
                type:Boolean,
                default(){
                    return false
                }
            },
            //当前用户信息
            user:{
                type:Object,
                default(){
                    return {}
                }
            },
            //角色列表
            rolesList:{
                type:Array,
                default(){
                    return []
                }
            }
        },
        data(){
            return {
                roleId:''
            }
        },
        methods:{
            quit(){
               this.$bus.$emit('addUserRole')
            },
            addUserRole(){
                addUserRole(this.user.id,this.roleId).then(res => {
                    if(res.data.meta.status !== 200){
                        this.$message.error(res.data.meta.msg);
                        console.log(res)
                    }
                    this.$message.success(res.data.meta.msg);
                    this.$bus.$emit('addUserRole');
                    this.$bus.$emit('getUserB')
                })
            }
        },
    }
</script>

<style scoped lang="less">
    .el-select{
        margin-left: 1rem;
    }
</style>
